<template>
  <div class="school">
    <h1>校区组件</h1>
    <h2>{{ msg }}</h2>
    <button @click="jump">点击显示children</button>
    <!-- 这一块显示嵌套结构 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  // 从另外一个组件到当前组件,组件被解析渲染
  // 路由变化意味着渲染的组件变化,触发mounted
  mounted() {
    console.log(this.$route);
    //$route:获取路由参数,是个对象
    let id = this.$route.params.id;
    if (id == "1") {
      this.msg = "广州校区的页面";
    } else if (id == "2") {
      this.msg = "深圳校区的页面";
    } else if (id == "3") {
      this.msg = "江苏校区的页面";
    } else {
      this.msg = "网站正在建设中";
    }
  },
  methods: {
    jump() {
      // 添加编程式导航
      //params:传参
      this.$router
        .push({ name: "children", params: { username: "59期" } })
        .catch(() => {
          "我还是有反应的,防止报冗余错误";
        });
    },
  },
  watch: {
    // 同一个路由，参数变化时触发watch
    //// 当同一个组件,路由参数变化时触发
    $route(to, from) {
      // console.log(from);
      // console.log(to);
      let id = to.params.id;
      if (id == "1") {
        this.msg = "广州校区的页面";
      } else if (id == "2") {
        this.msg = "深圳校区的页面";
      } else if (id == "3") {
        this.msg = "江苏校区的页面";
      }
    },
  },
};
</script>

<style lang="less" scoped>
h1 {
  text-align: center;
  margin: 20px auto;
}
.school {
  background-color: pink;
}
</style>
